<template>
	<view>
		<!-- 搜索 -->
		<Search />
		<!-- 分类 -->
		<view class="category">
			<!-- 顶级分类 -->
			<view class="sup">
				<scroll-view scroll-y @click='handleChange'>
					<text :data-id='item.cat_id' :class='{ active: currentId === item.cat_id }' :key='item.cat_id'
						v-for='item in CateList'>{{ item.cat_name }}</text>
				</scroll-view>
			</view>
			<!-- 子级分类 -->
			<view class="sub">
				<scroll-view scroll-y>
					<!-- 封面图 -->
					<image src="http://static.botue.com/ugo/uploads/category.png" class="thumb"></image>
					<!-- 二级分类 -->
					<view class="children" v-for="(item,index) in rightData" :key="item.cat_id ">
						<view class="title" >{{ item.cat_name }}</view>
						<!-- 品牌 -->
						<view class="brands">
							<!-- <navigator url="/pages/list/index"> -->
							<navigator  v-for="brand in item.children" :key="brand.cat_id ">
								<image src="http://static.botue.com/ugo/uploads/brand_1.jpg"></image>
								<text>{{ item.cat_name }}</text>
							</navigator>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
import Search from '../../components/search/index.vue'
import { caTegories } from '@/api/logo.js'; // 引入api
export default {
	data() {
		return {
			title: 'Hello',
			CateList: [],
			currentId: 1
		}
	},
	onLoad() {
		this.loadCateData()
	},
	methods: {
		handleChange(e) {
			// 控制一级分类的切换
			// console.log('change' + e.target.dataset.id)
			this.currentId = e.target.dataset.id
		},
		async loadCateData() {
			const res = await caTegories()
			if (res.meta.status === 200) {
				this.CateList = res.message
			} else {
				uni.showToast(res.meta.msg)
			}
		}
	},
	computed:{
		  // 根据分类的所有数据和当前选中的一级分类的数据获取右侧要展示的二级和三级分类
		rightData(){
			const rd = this.CateList.filter(item =>{
				return item.cat_id === this.currentId
			})
			const cate = rd && rd.length > 0 && rd[0].children
			console.log(cate);
			return cate
		}	
	},
	components: {
		Search
	}
}
</script>
<style scoped lang="less">
scroll-view {
	height: 100%;
}

.category {
	display: flex;
	width: 100%;
	position: absolute;
	top: 100rpx;
	bottom: 0;

	.sup {
		width: 196rpx;
		background-color: #f4f4f4;

		text {
			display: block;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 27rpx;
			color: #333;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border-bottom: none;
			}

			&.active {
				background-color: #FFF;
				color: #ea4451;
				position: relative;

				&::before {
					content: '';
					display: block;
					width: 8rpx;
					height: 60rpx;
					transform: translateY(-50%);
					background-color: #ea4451;

					position: absolute;
					left: 0;
					top: 50%;
				}
			}
		}
	}

	.sub {
		flex: 1;
		padding: 20rpx 18rpx;

		.thumb {
			width: 100%;
			height: 180rpx;
		}

		.children {
			text-align: center;
			color: #333;

			.title {
				display: inline-block;
				margin: 40rpx 0 20rpx;
				font-size: 30rpx;

				&::before {
					content: '/';
					margin-right: 20rpx;
					color: #666;
				}

				&::after {
					content: '/';
					margin-left: 20rpx;
					color: #666;
				}
			}
		}

		.brands {
			display: flex;
			flex-wrap: wrap;

			navigator {
				width: 33%;
				margin-bottom: 20rpx;
			}

			image {
				width: 120rpx;
				height: 120rpx;
			}

			text {
				display: block;
				font-size: 24rpx;
			}
		}
	}
}
</style>
